<template>
    <div class="frequently">
        <div class="title">Frequently Asked Questions</div>
        <div class="question-list">
            <div class="question-item" v-for="(question, index) in questions" :key="question.number">
                <div class="question-title" @click="toggleAnswer(index)">
                    <div class="title-text">
                        <span class="number">{{ question.number }}</span>
                        <span>{{ question.title }}</span>
                    </div>
                    <el-icon v-if="!expandedStates[index]"><Plus /></el-icon>
                    <el-icon v-else><Minus /></el-icon>
                </div>
                <div class="question-answer" v-html="question.answer" v-show="expandedStates[index]"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

const questions = [
    {
        "number": "01",
        "title": "How do I install this app after downloading it?",
        "answer": "<p>If you're an Android user and don't download the app from the official Google Play Store, you may find the installation process more complicated than usual.</p><p>But we are delighted to inform you that you don't need to worry. To ensure you could install this app smoothly, we have written and uploaded a detailed tutorial. It would guide you on installing an app after downloading it from our website step by step, with the help of pictures.</p><p>You may find this helpful article on the downloading site, or visit <a class=\"question-link\" href=\"/en/help/index\" target=\"_blank\">How to install APK/XAPK files on Android.</a></p><p>If you need further help, please do not hesitate to contact us via email cosnewsletters1@gmail.com.</p>"
    },
    {
        "number": "02",
        "title": "Is this app safe to use?",
        "answer": "<p>We fully understand your concern about safety. We agree that one person wouldn't be too careful in the cyber world. Meanwhile, we are happy to tell you that one of our priorities is to provide our users with safe app files that they can use without any worries.</p><p>We guarantee that all the app files we provided originate from official and reliable sources. We promise that they do not contain any malware that will harm your hardware or the safety of your privacy.</p>"
    },
    {
        "number": "03",
        "title": "Is this app free to download?",
        "answer": "<p>We are happy to inform you that the answer is an absolute YES! All the apps on our website are 100% free to download. Besides, you do not have to create an account. Just click on the download button, and it's done.</p>"
    },
    {
        "number": "04",
        "title": "How do I find my account back?",
        "answer": "<p>Recently we received a lot of emails from our users, which said they couldn't log in for different reasons, such as \"forgot the user name or password\" or \"had a new phone.\" We are willing to help you out. Please read the notes below to see what we can do.</p><p>To answer this question, please first let us know which account you're referring to.</p><p>If you're referring to your account of some app, like your Facebook account or your Youtube account. Unfortunately, we would not be able to help in this case. We would suggest you turn to the customer service of this application.</p><p>If you're referring to your apkuick account, we should apologize for your confusion since there is no apkuick account. We never require registration for our service, and you will not find any procedure related to creating an account or registering on our website.</p>"
    },
    {
        "number": "05",
        "title": "How do I cancel subscriptions?",
        "answer": "<p>This question is essentially quite similar to the prior one. It's a pity that we are unable to help you to cancel the subscription to a third-party application directly, while we would suggest you to contact its customer service for further information.</p>"
    },
    {
        "number": "06",
        "title": "How do I get a refund?",
        "answer": "<p>Sorry that we are unable to help you to get a refund from a third-party application directly. If you wish to get a refund from a third-party app, we would suggest you to contact its customer service. We would be happy to provide you the way to contact them.</p><p>If you want a refund from us, we should apologize for your confusion. Our service is 100% free, and any payment information is not required.</p><p>If you run into any site that asks you to provide your payment information, be careful. Remember never reveal your payment information to any unauthorized third parties, no matter how attempting their offer may seem.</p>"
    },
    {
        "number": "07",
        "title": "How to use this app?",
        "answer": "<p>Sorry that we cannot answer this question directly, for this only aims to answer some general questions. You may find how to use a certain app by checking our review page.</p>"
    }
]

// 创建一个响应式数组来跟踪每个问题的展开状态
const expandedStates = ref(questions.map(() => false))

// 切换答案的显示/隐藏
const toggleAnswer = (index: number) => {
    expandedStates.value[index] = !expandedStates.value[index]
}
</script>

<style lang="scss" scoped>
.title {
    @include title;
}

.frequently {
    margin: 2rem 0;
    .question-list {
        margin-top: 1rem;
        .question-item {
            margin-bottom: 1rem;
            .question-title {
                font-weight: 500;
                padding: 1rem;
                background: #f5f5f5;
                color: #F78B17;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                .title-text {
                    .number {
                        margin-right: .8rem;
                    }
                }
                .el-icon {
                    font-weight: 600;
                }
            }
            .question-answer {
                padding: .5rem 1rem;
                background: #fff;
                color: #333;
                border: 1px solid #f5f5f5;
                :deep(.question-link) {
                    color: #F78B17;
                }
            }
        }
    }
}
</style>
